<template>
    <div>
        <el-popover placement="bottom-start" width="1000" style="box-shadow: 0 0 8px rgba(0,0,0,.5);" trigger="click">
            <el-form :inline="true" :model="search">
                <el-form-item label="物料名">
                    <el-input v-model="search.bom"  ></el-input>
                </el-form-item>
                <el-form-item label="供应商名称">
                    <el-autocomplete  class="inputSuffix"  v-model="search.supplier" :fetch-suggestions="searchAsyncSupplier" placeholder="请输入供应商名称" @select="changeSupplier"></el-autocomplete>
                </el-form-item>
                <el-button type="primary" @click="searchData" icon="el-icon-search">查询</el-button>
            </el-form>
            <el-button slot="reference" type="primary">查询</el-button>
        </el-popover>
        <el-table :data="dataList" :highlight-current-row="true" stripe border class="table-index" :height="tableHeight" style="width: 100%;" :header-cell-style="getRowClass" v-loading='loading'>
            <el-table-column fixed type="index" label="*"  min-width="40"></el-table-column>
            <el-table-column prop="taskcode" label="生产令号" sortable min-width="140"></el-table-column>
            <el-table-column prop="batchnums" label="批号" sortable min-width="140"></el-table-column>
            <el-table-column prop="businesstypeName" label="生产厂家" sortable min-width="270"></el-table-column>
            <el-table-column prop="resourcenameName.name" label="物料名称" sortable  min-width="140"></el-table-column>
            <el-table-column prop="price" label="单价" sortable  width="80"></el-table-column>
            <el-table-column prop="totals" label="总价" sortable  width="80"></el-table-column>
            <el-table-column prop="tasknums" label="计划量" sortable  width="80"></el-table-column>
            <el-table-column prop="actualcompletenums" label="实际量" sortable  width="80"></el-table-column>
            <el-table-column prop="remainingnums" label="剩余量" sortable  width="80"></el-table-column>
            <el-table-column prop="istaskend" label="是否发完" sortable  width="60">
                 <template slot-scope="scope">
                   <div v-if="scope.row.istaskend===0">否</div>
                    <div v-if="scope.row.istaskend===1">是</div>
                </template>
            </el-table-column>
            <el-table-column prop="taskreleaseaddtime" label="创建时间" sortable   width="60"  :formatter="timesFormatter"></el-table-column>
             <el-table-column prop="taskreleasepersonName" label="任务创建人" sortable  min-width="140"></el-table-column>

            <el-table-column fixed="right" label="操作"  align="center" width="160">
                <template slot-scope="scope">
                    <el-button @click="dialogShow('update',scope.row)" type="text" size="small">编辑</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="pagination.currentPage" :page-sizes="[5,10, 15,20, 25,30,50, 100]" :page-size="pagination.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="pagination.total"></el-pagination>
        <!-- 详情信息 -->
        <el-dialog :title="dialog.title" width="85%" top="30px" :visible.sync="dialog.isShow" :close-on-click-modal="false" >
            <el-tabs v-model="activeName" @tab-click="handleClick" style="padding-bottom: 15px;">
                <el-tab-pane label="任务信息" name="1" class="dialog1" :style="dialogHeightPane" >
                    <h3 class="dialog-plate-title"><span>基本信息</span></h3>
                    <el-form :inline="true" class="demo-form-inline" v-model="dialog.formData" label-position="right" label-width="180px">
                        <el-form-item label="令号"><el-input v-model="dialog.formData.taskcode" disabled></el-input></el-form-item>
                        <el-form-item label="物料产品批号"><el-input v-model="dialog.formData.batchnums" disabled></el-input></el-form-item>
                        <el-form-item label="物料产品名称">
                            <el-input v-model="dialog.formData.resourcenameName.name" v-if="dialog.formData.resourcenameName" disabled></el-input>
                             <!-- <el-autocomplete v-model="dialog.formData.resourcenameName.name" :fetch-suggestions="querySearchAsync" placeholder="请输入内容"  @select="handleSelect" disabled></el-autocomplete> -->
                        </el-form-item>
                        <el-form-item label="产品型号"><el-input v-model="dialog.formData.typenums" disabled></el-input></el-form-item>
                        <el-form-item label="供应商">
                            <el-select v-model="dialog.formData.businesstypeName" disabled>
                                <el-option v-for="item in allSupplier" :key="item.id" :label="item.name" :value="item.id"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="收货计划编制人"><el-input v-model="dialog.formData.taskreleasepersonName" disabled></el-input></el-form-item>
                        <el-form-item label="编制创建时间"><el-date-picker v-model="dialog.formData.taskreleaseaddtime" disabled format="yyyy-MM-dd HH:mm:ss" type="datetime" placeholder="选择日期时间" style="width: 200px;"></el-date-picker></el-form-item>
                        <el-form-item label="物料管理负责人">
                            <el-input v-model="dialog.formData.taskperformpersonName" disabled></el-input>
                        </el-form-item>
                        <el-form-item label="物料计划到货时间">
                            <el-date-picker v-model="dialog.formData.taskstartorendtime" disabled format="yyyy-MM-dd HH:mm:ss" type="datetime" placeholder="选择日期时间" style="width: 200px;"></el-date-picker>
                        </el-form-item>
                        <el-form-item label="计划创建类型">
                            <el-select v-model="dialog.formData.tasktype" disabled>
                                <el-option label="计划任务" :value="1"></el-option>
                                <el-option label="临时任务" :value="2"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-form>

                    <h3 class="dialog-plate-title"><span>待办信息</span></h3>
                    <el-form :inline="true" class="demo-form-inline" v-model="dialog.formData" label-position="right" label-width="180px">
                        <el-form-item label="任务是否接收">
                            <el-select v-model="dialog.formData.istaskstart" disabled>
                                <el-option label="否" :value="0"></el-option>
                                <el-option label="是" :value="1"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="接收创建时间">
                            <el-date-picker v-model="dialog.formData.taskbeginaddtime" disabled format="yyyy-MM-dd HH:mm:ss" type="datetime" placeholder="选择日期时间" style="width: 200px;"></el-date-picker>
                        </el-form-item>
                    </el-form>

                    <h3 class="dialog-plate-title"><span>进行中信息</span></h3>
                    <el-form :inline="true" class="demo-form-inline" v-model="dialog.formData" label-position="right" label-width="180px">
                        <el-form-item label="物料是否到货">
                            <el-select v-model="dialog.formData.istaskbegin" disabled>
                                <el-option label="否" :value="0"></el-option>
                                <el-option label="是" :value="1"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="物料实际到货时间">
                            <el-date-picker v-model="dialog.formData.taskbegintime" disabled format="yyyy-MM-dd HH:mm:ss" type="datetime" placeholder="选择日期时间" style="width: 200px;"></el-date-picker>
                        </el-form-item>
                        <el-form-item label="到货创建时间">
                            <el-date-picker v-model="dialog.formData.taskbeginaddtime" disabled format="yyyy-MM-dd HH:mm:ss" type="datetime" placeholder="选择日期时间" style="width: 200px;"></el-date-picker>
                        </el-form-item>
                        <el-form-item label="计量单位">
                            <el-input  v-model="dialog.formData.unit" disabled></el-input>
                        </el-form-item>
                        <el-form-item label="计划原料总量">
                            <el-input v-model="dialog.formData.tasknums" disabled></el-input>
                        </el-form-item>
                        <el-form-item label="实际原料总量">
                            <el-input v-model="dialog.formData.actualcompletenums" disabled></el-input>
                        </el-form-item>
                        <el-form-item label="剩余量">
                            <el-input v-model="dialog.formData.remainingnums" disabled></el-input>
                        </el-form-item>
                        <el-form-item label="物料是否发放完">
                            <el-select v-model="dialog.formData.istaskend" >
                                <el-option label="否" :value="0"></el-option>
                                <el-option label="是" :value="1"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="物料实际发放完时间">
                            <el-date-picker v-model="dialog.formData.taskendtime"  format="yyyy-MM-dd HH:mm:ss" type="datetime" placeholder="选择日期时间" style="width: 200px;"></el-date-picker>
                        </el-form-item>
                        <el-form-item label="发完创建时间">
                            <el-date-picker v-model="dialog.formData.taskendaddtime"  format="yyyy-MM-dd HH:mm:ss" type="datetime" placeholder="选择日期时间" style="width: 200px;"></el-date-picker>
                        </el-form-item>
                    </el-form>
                    <div style="text-align: right">
                        <el-button @click="submitList" type="primary">确 定</el-button>
                    </div>
                </el-tab-pane>
                <el-tab-pane   label="出库信息" name="2" :style="dialogHeightPane">
                    <!-- <el-button @click="insertProcessStateList" type="primary" size="small">新增</el-button> -->
                    <el-table :data="processStateData" stripe border class="table-index" :height="dialogTableHeight" style="width: 100%;" :header-cell-style="getRowClass">
                        <el-table-column fixed type="index" label="*" sortable min-width="40"></el-table-column>
                        <el-table-column prop="nameName" label="物料名称" sortable min-width="120"></el-table-column>
                        <el-table-column prop="batchnums" label="物料批号" sortable min-width="120"></el-table-column>
                        <el-table-column prop="typenums" label="物料型号" sortable min-width="120"></el-table-column>
                        <el-table-column prop="code" label="物料条码" sortable min-width="120"></el-table-column>
                        <el-table-column prop="usenums" label="使用数量" sortable min-width="100"></el-table-column>
                        <el-table-column prop="usepersonName" label="领料人" sortable min-width="120"></el-table-column>
                        <el-table-column prop="outstoragetime" label="出库时间" sortable min-width="170"></el-table-column>
                        <el-table-column prop="materialstate" label="物料状态" :formatter="formatterMaterialState" sortable min-width="130"></el-table-column>
                    </el-table>
                    <!-- <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" :page-sizes="[5,10, 15,20, 25,30,50, 100]" :page-size="pagesize" layout="total, sizes, prev, pager, next, jumper" :total="processStateData.length"></el-pagination> -->
                </el-tab-pane>
            </el-tabs>
        </el-dialog>
    </div>
</template>
<script>
import postSaleApi from "@/axios/postSale.js"
import cgbHttp from '@/axios/cgbHttp.js'
export default {
    name: 'statute-file-parent',
    data() {
         let menuId = sessionStorage.getItem('menuId');
      return {
            menuId,
            tableHeight:document.documentElement.clientHeight - 170,
            dialogTableHeight: document.documentElement.clientHeight - 260,
            dialogHeightPane: {
                height: (document.documentElement.clientHeight - 180) + 'px',
                overflowY: 'auto'
            },
            allSupplier:[],
            search:{
              bom:'',
              supplier:'',
              supplierName:''
            },
            pagination:{
              currentPage:1,
              pageSize:10,
              total:0
            },
            dataList:[],
            loading:false,
            activeName:'1',
            dialog:{
                title:'',
                isShow:false,
                formData:{}
            },
            processStateData:[]
      }
    },
    created(){
        let self = this;
        cgbHttp.supplierAllList().then(res=>{
            /**获取所有供应商列表 */
            if(res.content.length>0){
                res.content.forEach(el => {
                    el.value =el.name;
                    self.allSupplier.push({
                        name:el.name,
                        value:el.name,
                        id:el.id
                    });
                });
            }
        })
        self.getTableList();
    },
    methods:{
         timesFormatter(row, column, cellValue, index){
            return cellValue?this.timestampToTime1(cellValue,'mm-dd'):'';
        },
        getTableList(){
            let self = this;
            let postData={
                currentPage:self.pagination.currentPage,
                pageSize:self.pagination.pageSize,
                bom:self.search.bom,
                supplier:self.search.supplierName===""?null:self.search.supplier
            }
            self.loading = true;
            switch(self.menuId){
                case '5168':
                    postData.taskState=1;
                    postData.taskFinishState=0;
                    postData.isReviewTask=0;
                    break;
                case '5169':
                    postData.taskState=1;
                    postData.taskFinishState=1;
                    postData.isReviewTask=1;
                    break;
            }
            postSaleApi.afterSaleMaterialTask(postData).then(res=>{
                 self.loading = false;
                self.dataList= res.content.records;
                self.pagination.total =res.content.total;
            },error=>{
                 self.loading = false;
            })

        },
        searchData(){
            this.pagination.currentPage = 1;
            this.getTableList()
        },
        handleSizeChange(size){
            this.pagination.pageSize = size;
            this.getTableList()
        },
        handleCurrentChange(current){
            this.pagination.currentPage = current;
            this.getTableList();
        },
        searchAsyncSupplier(queryString, callback){
            let results = queryString ?  this.allSupplier.filter(this.createStateFilter(queryString)) : this.allSupplier;
            callback(results);
        },
        changeSupplier(item){
            this.search.supplier=item.id;
        },
        createStateFilter(queryString) {
            return (state) => {
                return (state.value.toLowerCase().indexOf(queryString.toLowerCase()) !==-1);
            };
        },
        dialogShow(type,row){
            let self = this;
            self.dialog.isShow = true;
            self.dialog.title = "详情";
            self.activeName="1";
            self.dialog.formData = row;
        },
        handleClick(tab, event){
            let self = this;
            if(self.activeName==='2'){
                postSaleApi.shDepositRecord(self.dialog.formData.tid).then(res=>{
                    self.processStateData = res.content;
                })
            }
        },
        submitList(){
            debugger;
        }
    }
  }
</script>
<style scoped>
</style>
